<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对账单</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-pink-500 to-rose-500 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="b2b-finance.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">对账单</h1>
                <button onclick="downloadStatement()" class="text-white hover:opacity-80">
                    <i class="fas fa-download text-lg"></i>
                </button>
            </div>
        </div>

        <!-- Period Filter -->
        <div class="bg-white border-b border-gray-200 px-4 py-3">
            <div class="flex space-x-2">
                <button onclick="selectPeriod('current')" class="flex-1 bg-pink-100 text-pink-600 py-2 px-3 rounded-lg text-sm font-medium border border-pink-200">
                    本月
                </button>
                <button onclick="selectPeriod('last')" class="flex-1 bg-gray-100 text-gray-600 py-2 px-3 rounded-lg text-sm hover:bg-gray-200">
                    上月
                </button>
                <button onclick="selectPeriod('custom')" class="flex-1 bg-gray-100 text-gray-600 py-2 px-3 rounded-lg text-sm hover:bg-gray-200">
                    自定义
                </button>
            </div>
        </div>

        <!-- Content -->
        <div class="h-[calc(852px-180px)] overflow-y-auto pb-24">
            <!-- Statement Summary -->
            <div class="p-4">
                <div class="bg-gradient-to-r from-pink-50 to-rose-50 rounded-xl border border-pink-200 p-4">
                    <div class="text-center mb-4">
                        <h3 class="text-sm font-semibold text-gray-800 mb-1">2025年01月对账单</h3>
                        <p class="text-xs text-gray-600">统计期间：2025-01-01 至 2025-01-05</p>
                    </div>
                    
                    <div class="grid grid-cols-3 gap-3 text-center">
                        <div>
                            <p class="text-lg font-bold text-green-600">¥18,956</p>
                            <p class="text-xs text-gray-600">总收入</p>
                        </div>
                        <div>
                            <p class="text-lg font-bold text-red-600">¥2,468</p>
                            <p class="text-xs text-gray-600">总支出</p>
                        </div>
                        <div>
                            <p class="text-lg font-bold text-blue-600">¥16,488</p>
                            <p class="text-xs text-gray-600">净收益</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Transaction Categories -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-pink-600 mr-2 rounded-full"></span>
                    收支分类
                </h3>
                
                <div class="space-y-3">
                    <!-- Income Categories -->
                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex items-center justify-between mb-3">
                            <h4 class="text-sm font-medium text-gray-800">收入明细</h4>
                            <span class="text-sm font-bold text-green-600">¥18,956</span>
                        </div>
                        
                        <div class="space-y-2">
                            <div class="flex justify-between items-center">
                                <div class="flex items-center">
                                    <div class="w-6 h-6 bg-green-100 rounded-full flex items-center justify-center mr-2">
                                        <i class="fas fa-shopping-bag text-green-600 text-xs"></i>
                                    </div>
                                    <span class="text-xs text-gray-600">商品销售</span>
                                </div>
                                <div class="text-right">
                                    <span class="text-xs font-medium">¥16,750</span>
                                    <span class="text-xs text-gray-500 ml-1">(88.4%)</span>
                                </div>
                            </div>
                            
                            <div class="flex justify-between items-center">
                                <div class="flex items-center">
                                    <div class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center mr-2">
                                        <i class="fas fa-gift text-blue-600 text-xs"></i>
                                    </div>
                                    <span class="text-xs text-gray-600">推广佣金</span>
                                </div>
                                <div class="text-right">
                                    <span class="text-xs font-medium">¥1,896</span>
                                    <span class="text-xs text-gray-500 ml-1">(10.0%)</span>
                                </div>
                            </div>
                            
                            <div class="flex justify-between items-center">
                                <div class="flex items-center">
                                    <div class="w-6 h-6 bg-purple-100 rounded-full flex items-center justify-center mr-2">
                                        <i class="fas fa-coins text-purple-600 text-xs"></i>
                                    </div>
                                    <span class="text-xs text-gray-600">其他收入</span>
                                </div>
                                <div class="text-right">
                                    <span class="text-xs font-medium">¥310</span>
                                    <span class="text-xs text-gray-500 ml-1">(1.6%)</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Expense Categories -->
                    <div class="bg-white rounded-lg border border-gray-200 p-3">
                        <div class="flex items-center justify-between mb-3">
                            <h4 class="text-sm font-medium text-gray-800">支出明细</h4>
                            <span class="text-sm font-bold text-red-600">¥2,468</span>
                        </div>
                        
                        <div class="space-y-2">
                            <div class="flex justify-between items-center">
                                <div class="flex items-center">
                                    <div class="w-6 h-6 bg-red-100 rounded-full flex items-center justify-center mr-2">
                                        <i class="fas fa-percentage text-red-600 text-xs"></i>
                                    </div>
                                    <span class="text-xs text-gray-600">平台佣金</span>
                                </div>
                                <div class="text-right">
                                    <span class="text-xs font-medium">¥2,018</span>
                                    <span class="text-xs text-gray-500 ml-1">(81.8%)</span>
                                </div>
                            </div>
                            
                            <div class="flex justify-between items-center">
                                <div class="flex items-center">
                                    <div class="w-6 h-6 bg-orange-100 rounded-full flex items-center justify-center mr-2">
                                        <i class="fas fa-truck text-orange-600 text-xs"></i>
                                    </div>
                                    <span class="text-xs text-gray-600">物流费用</span>
                                </div>
                                <div class="text-right">
                                    <span class="text-xs font-medium">¥380</span>
                                    <span class="text-xs text-gray-500 ml-1">(15.4%)</span>
                                </div>
                            </div>
                            
                            <div class="flex justify-between items-center">
                                <div class="flex items-center">
                                    <div class="w-6 h-6 bg-gray-100 rounded-full flex items-center justify-center mr-2">
                                        <i class="fas fa-cog text-gray-600 text-xs"></i>
                                    </div>
                                    <span class="text-xs text-gray-600">其他费用</span>
                                </div>
                                <div class="text-right">
                                    <span class="text-xs font-medium">¥70</span>
                                    <span class="text-xs text-gray-500 ml-1">(2.8%)</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Detailed Transactions -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center justify-between">
                    <span class="flex items-center">
                        <span class="w-1 h-4 bg-pink-600 mr-2 rounded-full"></span>
                        交易明细
                    </span>
                    <span class="text-xs text-pink-600">共156笔</span>
                </h3>
                
                <div class="space-y-3">
                    <!-- Transaction by Date -->
                    <div class="bg-white rounded-lg border border-gray-200">
                        <div class="px-3 py-2 bg-gray-50 border-b border-gray-100">
                            <p class="text-xs font-medium text-gray-700">2025-01-05</p>
                        </div>
                        
                        <div class="divide-y divide-gray-100">
                            <div class="p-3">
                                <div class="flex items-center justify-between mb-1">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3">
                                            <i class="fas fa-arrow-down text-green-600 text-sm"></i>
                                        </div>
                                        <div>
                                            <p class="text-sm font-medium">订单收入</p>
                                            <p class="text-xs text-gray-500">订单号: 202501050156</p>
                                        </div>
                                    </div>
                                    <div class="text-right">
                                        <p class="text-sm font-bold text-green-600">+¥1,298</p>
                                        <p class="text-xs text-gray-400">10:32</p>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="p-3">
                                <div class="flex items-center justify-between mb-1">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center mr-3">
                                            <i class="fas fa-arrow-up text-red-600 text-sm"></i>
                                        </div>
                                        <div>
                                            <p class="text-sm font-medium">平台佣金</p>
                                            <p class="text-xs text-gray-500">费率: 3%</p>
                                        </div>
                                    </div>
                                    <div class="text-right">
                                        <p class="text-sm font-bold text-red-600">-¥38.94</p>
                                        <p class="text-xs text-gray-400">10:32</p>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="p-3">
                                <div class="flex items-center justify-between mb-1">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3">
                                            <i class="fas fa-arrow-down text-green-600 text-sm"></i>
                                        </div>
                                        <div>
                                            <p class="text-sm font-medium">订单收入</p>
                                            <p class="text-xs text-gray-500">订单号: 202501050155</p>
                                        </div>
                                    </div>
                                    <div class="text-right">
                                        <p class="text-sm font-bold text-green-600">+¥598</p>
                                        <p class="text-xs text-gray-400">09:45</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- More days -->
                    <div class="bg-white rounded-lg border border-gray-200">
                        <div class="px-3 py-2 bg-gray-50 border-b border-gray-100">
                            <p class="text-xs font-medium text-gray-700">2025-01-04</p>
                        </div>
                        
                        <div class="divide-y divide-gray-100">
                            <div class="p-3">
                                <div class="flex items-center justify-between mb-1">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                                            <i class="fas fa-money-check-alt text-blue-600 text-sm"></i>
                                        </div>
                                        <div>
                                            <p class="text-sm font-medium">提现申请</p>
                                            <p class="text-xs text-gray-500">工行尾号8866</p>
                                        </div>
                                    </div>
                                    <div class="text-right">
                                        <p class="text-sm font-bold text-blue-600">-¥10,000</p>
                                        <p class="text-xs text-gray-400">15:30</p>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="p-3">
                                <div class="flex items-center justify-between mb-1">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-3">
                                            <i class="fas fa-arrow-down text-green-600 text-sm"></i>
                                        </div>
                                        <div>
                                            <p class="text-sm font-medium">推广佣金</p>
                                            <p class="text-xs text-gray-500">下级商家分佣</p>
                                        </div>
                                    </div>
                                    <div class="text-right">
                                        <p class="text-sm font-bold text-green-600">+¥156</p>
                                        <p class="text-xs text-gray-400">14:22</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Load More -->
                    <div class="text-center py-4">
                        <button onclick="loadMoreTransactions()" class="text-pink-600 text-sm hover:text-pink-700">
                            <i class="fas fa-chevron-down mr-1"></i>查看更多交易记录
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bottom Actions -->
        <div class="absolute bottom-1 left-0 right-0 bg-white border-t border-gray-200 p-4">
            <div class="flex gap-3">
                <button onclick="exportStatement()" class="flex-1 bg-pink-100 text-pink-700 py-3 rounded-lg font-medium hover:bg-pink-200 transition-colors">
                    <i class="fas fa-file-export mr-2"></i>导出报表
                </button>
                <button onclick="downloadStatement()" class="flex-1 bg-gradient-to-r from-pink-500 to-rose-500 text-white py-3 rounded-lg font-medium hover:opacity-90 transition-opacity">
                    <i class="fas fa-download mr-2"></i>下载PDF
                </button>
            </div>
        </div>
    </div>

    <script>
        // Statement management functions
        function selectPeriod(period) {
            // Update UI to show selected period
            const buttons = document.querySelectorAll('[onclick*="selectPeriod"]');
            buttons.forEach(btn => {
                btn.className = 'flex-1 bg-gray-100 text-gray-600 py-2 px-3 rounded-lg text-sm hover:bg-gray-200';
            });
            
            // Highlight selected button
            event.target.className = 'flex-1 bg-pink-100 text-pink-600 py-2 px-3 rounded-lg text-sm font-medium border border-pink-200';
            
            let periodText = '';
            switch(period) {
                case 'current':
                    periodText = '本月对账单';
                    break;
                case 'last':
                    periodText = '上月对账单';
                    break;
                case 'custom':
                    showDatePicker();
                    return;
            }
            
            showToast(`正在加载${periodText}...`);
            
            // 模拟数据加载
            setTimeout(() => {
                showToast('对账单已更新');
            }, 1000);
        }

        function showDatePicker() {
            const startDate = prompt('请输入开始日期 (格式: YYYY-MM-DD)', '2024-12-01');
            if (!startDate) return;
            
            const endDate = prompt('请输入结束日期 (格式: YYYY-MM-DD)', '2024-12-31');
            if (!endDate) return;
            
            if (new Date(startDate) > new Date(endDate)) {
                alert('开始日期不能晚于结束日期');
                return;
            }
            
            showToast(`正在加载${startDate}至${endDate}的对账单...`);
            
            setTimeout(() => {
                showToast('自定义期间对账单已生成');
            }, 1500);
        }

        function downloadStatement() {
            showToast('正在生成PDF对账单...');
            
            // 模拟PDF生成过程
            setTimeout(() => {
                showToast('PDF对账单已下载');
            }, 2000);
        }

        function exportStatement() {
            const format = confirm('选择导出格式:\n\n确定 - Excel格式\n取消 - CSV格式');
            const formatText = format ? 'Excel' : 'CSV';
            
            showToast(`正在导出${formatText}格式对账单...`);
            
            setTimeout(() => {
                showToast(`${formatText}对账单已导出`);
            }, 2000);
        }

        function loadMoreTransactions() {
            showToast('正在加载更多交易记录...');
            
            setTimeout(() => {
                showToast('已加载更多交易记录');
            }, 1000);
        }

        // Toast notification
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            showToast('本月对账单已加载');
        });
    </script>
</body>
</html>